<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
<link href="../../../css/init.css" rel="stylesheet">
</head>

<body>
<div class='hg-panel'> 
    <!-- name -->
    <h2 class='hg-panel-title'>Bootstrap-4.0</h2>
    
    <!--dom-->
    <section class="bs4-btn">
        <button type="button" class="btn">默认</button>
        <button type="button" class="btn btn-primary">主要</button>
        <button type="button" class="btn btn-secondary">次要的</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn btn-light">发光</button>
        <button type="button" class="btn btn-dark">黑暗</button>
        <button type="button" class="btn btn-link">链接</button>
    </section>
    
    <!-- css -->
    <style>
.bs4-btn .btn{display: inline-block;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 1px solid transparent;padding: .5rem .75rem;font-size: 1rem;line-height: 1.25;border-radius: .25rem;transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}    
.bs4-btn .btn-primary {color: #fff;background-color: #007bff;border-color: #007bff;}
.bs4-btn .btn-secondary {color: #fff;background-color: #868e96;border-color: #868e96;}
.bs4-btn .btn-success {color: #fff;background-color: #28a745;border-color: #28a745;}
.bs4-btn .btn-danger {color: #fff;background-color: #dc3545;border-color: #dc3545;}
.bs4-btn .btn-warning {color: #111;background-color: #ffc107;border-color: #ffc107;}
.bs4-btn .btn-info {color: #fff;background-color: #17a2b8;border-color: #17a2b8;}
.bs4-btn .btn-light {color: #111;background-color: #f8f9fa;border-color: #f8f9fa;}
.bs4-btn .btn-dark {color: #fff;background-color: #343a40;border-color: #343a40;}
.bs4-btn .btn-link {font-weight: 400;color: #007bff;background-color: transparent;border-radius: 0;}
    </style>
    <!-- js --> 
    <script>

    </script> 
</div>
<div class='hg-panel'> 
    <!-- name -->
    <h2 class='hg-panel-title'>ZUI-1.7</h2>
    
    <!--dom-->
    <section class="zui-btn">
        <button type="button" class="btn">默认</button>
        <button type="button" class="btn btn-primary">主要</button>
        <button type="button" class="btn btn-success">成功</button>
        <button type="button" class="btn btn-danger">危险</button>
        <button type="button" class="btn btn-warning">警告</button>
        <button type="button" class="btn btn-info">信息</button>
        <button type="button" class="btn disabled">禁止</button>
    </section>
    
    <!-- css -->
    <style>
.zui-btn .btn {
  color: #353535;
  text-shadow: 0 1px 0 #fff;
  background-color: #f2f2f2;
  border-color: #bfbfbf;
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.53846154;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
}
.zui-btn .btn-primary {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #3280fc;
  border-color: #1970fc;
}
.zui-btn .btn-info {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #03b8cf;
  border-color: #03a2b6;
}
.zui-btn .btn-success {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #38b03f;
  border-color: #329d38;
}
.zui-btn .btn-warning {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #f1a325;
  border-color: #ed980f;
}
.zui-btn .btn-danger {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #ea644a;
  border-color: #e75033;
}

    </style>
    <!-- js --> 
    <script>

    </script> 
</div>
</body>
</html>